<template>
  <div ref="projectSummaryReports" style="height: 450px"></div>
</template>
<script>
import echarts from "echarts";
import { on } from "@/libs/tools";
export default {
  name: "project-summary-reports",
  props: {
    projectSummaryData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    projectSummaryData(val) {
      if (val) {
        this.drawChart(val);
      }
    },
  },
  data() {
    return {
      projectSummaryReports: null,
      seriesData: {
        initial: [],
        pass: [],
        partial_pass: [],
        fail: [],
        total: [],
      },
      yAxis: {
        max: 60,
        interval: 20,
      },
    };
  },
  methods: {
    drawChart(projectSummaryData) {
      this.seriesData.initial = [
        projectSummaryData.api.initial,
        projectSummaryData.testsuite.initial,
        projectSummaryData.testcase.initial,
      ];

      this.seriesData.pass = [
        projectSummaryData.api.pass,
        projectSummaryData.testsuite.pass,
        projectSummaryData.testcase.pass,
      ];

      this.seriesData.partial_pass = [
        projectSummaryData.api.partial_pass,
        projectSummaryData.testsuite.partial_pass,
        0,
      ];

      this.seriesData.fail = [
        projectSummaryData.api.fail,
        projectSummaryData.testsuite.fail,
        projectSummaryData.testcase.fail,
      ];

      this.seriesData.total = [
        projectSummaryData.api.total,
        projectSummaryData.testsuite.total,
        projectSummaryData.testcase.total,
      ];

      this.yAxis.max = Math.max(
        this.yAxis.interval *
          Math.ceil(
            Math.max(
              projectSummaryData.api.total,
              projectSummaryData.testsuite.total,
              projectSummaryData.testcase.total
            ) / this.yAxis.interval
          ),
        60
      );

      this.$nextTick(() => {
        let option = {
          title: { text: "项目概要图表" },
          grid: {
            left: "1%",
            right: "1%",
            bottom: "1%",
            containLabel: true,
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              crossStyle: {
                color: "#999",
              },
            },
          },
          toolbox: {
            feature: {
              magicType: { show: true, type: ["line", "bar"] },
              restore: { show: true },
              saveAsImage: { show: true },
            },
          },
          legend: {
            data: ["初始状态", "通过", "部分通过", "失败", "总数"],
          },
          xAxis: [
            {
              type: "category",
              data: ["接口", "场景", "用例"],
              axisPointer: {
                type: "shadow",
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              name: "数量",
              min: 0,
              max: this.yAxis.max,
              interval: this.yAxis.interval,
              axisLabel: {
                formatter: "{value}",
              },
            },
            {
              type: "value",
              name: "总数",
              min: 0,
              max: this.yAxis.max,
              interval: this.yAxis.interval,
              axisLabel: {
                formatter: "{value}",
              },
            },
          ],
          series: [
            {
              name: "初始状态",
              type: "bar",
              data: this.seriesData.initial,
              itemStyle: { color: "#2db7f5" },
            },
            {
              name: "通过",
              type: "bar",
              data: this.seriesData.pass,
              itemStyle: { color: "#19be6b" },
            },
            {
              name: "部分通过",
              type: "bar",
              data: this.seriesData.partial_pass,
              itemStyle: { color: "#ff9900" },
            },
            {
              name: "失败",
              type: "bar",
              data: this.seriesData.fail,
              itemStyle: { color: "#ed4014" },
            },
            {
              name: "总数",
              type: "line",
              yAxisIndex: 1,
              data: this.seriesData.total,
              itemStyle: { color: "#2d8cf0" },
            },
          ],
        };
        this.projectSummaryReports = echarts.init(
          this.$refs.projectSummaryReports,
          "light"
        );
        this.projectSummaryReports.setOption(option);
        on(window, "resize", this.resize);
      });
    },
  },
};
</script>
<style scoped>
</style>